<template>
  <ContentWrap>
    <ElRow justify="space-between">
      <ElCol :span="2">
        <input type="file" multiple @change="addWatermark" />
      </ElCol>
      <ElCol :span="2">
        <ElButton @click="downJpgByUrl" type="success">全部下载</ElButton>
      </ElCol>
    </ElRow>
    <ElRow :gutter="20" justify="center">
      <ElCol :span="4">
        <span>角度</span>
        <ElSlider v-model="rotate" :min="0" :max="180" />
      </ElCol>
      <ElCol :span="4">
        <span>透明度</span>
        <ElSlider v-model="transparent" :min="0" :max="1" :step="0.1" />
      </ElCol>
      <ElCol :span="3">
        <span>文字</span>
        <ElInput v-model="waterText" />
      </ElCol>
      <ElCol :span="3">
        <span>文字大小</span>
        <ElInputNumber v-model="waterSizeText" />
      </ElCol>
      <ElCol :span="3">
        <span>水平间距</span>
        <ElInputNumber v-model="widthSize" />
      </ElCol>
      <ElCol :span="3">
        <span>垂直间距</span>
        <ElInputNumber v-model="heightSize" />
      </ElCol>
    </ElRow>

    <ElRow justify="end" style="margin: 10px">
      <ElCol :span="2">
        <ElButton @click="updateImg" type="primary">更新</ElButton>
      </ElCol>
    </ElRow>
    <div></div>

    <ElRow :justify="left">
      <span v-for="(item, i) in fileList" :key="`video-${i}`" style="padding: 20px 5px">
        <ElCol :span="8">
          <ElCard style="width: 350px; height: 460px">
            <ElImage
              :src="item.imgUrl"
              style="width: 300px; height: 300px"
              :preview-src-list="imgUrlList"
              :initial-index="i"
            />
            <ElRow justify="space-around" :gutter="10">
              <ElCol :span="12">
                <span>文字</span>
                <ElInput
                  size="small"
                  v-model="item.textRight"
                  @input="
                    (e) => {
                      changeItem(i, e, 'textRight')
                    }
                  "
                />
              </ElCol>

              <ElCol :span="4">
                <span>颜色</span>
                <ElColorPicker
                  v-model="item.colorRight"
                  @change="
                    (e) => {
                      changeItem(i, e, 'colorRight')
                    }
                  "
                  show-alpha
                  :predefine="predefineColors"
                />
              </ElCol>
            </ElRow>
            <ElRow justify="space-around" :gutter="10">
              <ElCol :span="8">
                <span>水平间距</span>
                <ElInputNumber
                  size="small"
                  @change="
                    (e) => {
                      changeItem(i, e, 'widthRight')
                    }
                  "
                  v-model="item.widthRight"
                  style="width: 100px"
                />
              </ElCol>
              <ElCol :span="8">
                <span>垂直间距</span>
                <ElInputNumber
                  size="small"
                  @change="
                    (e) => {
                      changeItem(i, e, 'heightRight')
                    }
                  "
                  style="width: 100px"
                  v-model="item.heightRight"
                />
              </ElCol>
              <ElCol :span="8">
                <span>文字大小</span>
                <ElInputNumber
                  size="small"
                  @change="
                    (e) => {
                      changeItem(i, e, 'fontSizeRight')
                    }
                  "
                  style="width: 80px"
                  v-model="item.fontSizeRight"
                />
              </ElCol>
            </ElRow>
          </ElCard>
        </ElCol>
      </span>
    </ElRow>
  </ContentWrap>
</template>

<script>
import { ref } from 'vue'

import {
  ElTable,
  ElTableColumn,
  ElTag,
  ElProgress,
  ElInput,
  ElButton,
  ElImage,
  ElCard,
  ElCol,
  ElSlider,
  ElInputNumber,
  ElRow,
  ElColorPicker
} from 'element-plus'
import { Dialog } from '@/components/Dialog'

import { ContentWrap } from '@/components/ContentWrap'
export default {
  components: {
    ElButton,
    ElImage,
    ElCard,
    ElCol,
    ElInput,
    ElSlider,
    ElInputNumber,
    ElRow,
    ElColorPicker
  },
  setup(props) {
    const predefineColors = ref([
      '#ff4500',
      '#ff8c00',
      '#ffd700',
      '#90ee90',
      '#00ced1',
      '#1e90ff',
      '#c71585',
      'rgba(255, 69, 0, 0.68)',
      'rgb(255, 120, 0)',
      'hsv(51, 100, 98)',
      'hsva(120, 40, 94, 0.5)',
      'hsl(181, 100%, 37%)',
      'hsla(209, 100%, 56%, 0.73)',
      '#c7158577'
    ])
    const watermarkedImage = ref(null)
    const fileList = ref([])
    const imgUrlList = ref([])
    //透明度
    const transparent = ref(0.3)
    //水印角度
    const rotate = ref(25)
    const waterText = ref('13863978230')
    const waterSizeText = ref(20)
    const widthSize = ref(160)
    const heightSize = ref(80)
    //右下角配置
    const addWatermark = async (event) => {
      const fileArrList = event.target.files
      for (const vo of fileArrList) {
        vo.fontSizeRight = 46
        vo.textRight = ''
        vo.heightRight = -20
        vo.widthRight = -140
        vo.colorRight = 'rgba(0, 0, 0, 1)'
      }
      await addWaterCommon(fileArrList)
    }
    const addWaterCommon = async (fileArrList) => {
      const imgUrlArrList = []
      for (const vo of fileArrList) {
        const img = new Image()
        img.src = URL.createObjectURL(vo)
        await img.decode() // 确保图片加载完成

        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        const scaledWidth = img.width
        const scaledHeight = img.height
        let scaleMin = scaledWidth
        let isWidthMin = true
        if (scaledWidth > scaledHeight) {
          scaleMin = scaledHeight
          isWidthMin = false
        }
        const scaleFactorF = 800 / scaleMin
        const widthNew = scaledWidth * scaleFactorF
        const heightNew = scaledHeight * scaleFactorF
        let dx = 0
        let dy = 0
        if (isWidthMin) {
          dx = (heightNew - 800) / 2
        } else {
          dy = (widthNew - 800) / 2
        }
        canvas.width = 800
        canvas.height = 800
        ctx.drawImage(img, -dy, -dx, widthNew, heightNew)
        if (vo.textRight !== '') {
          ctx.translate(800, 800)
          ctx.font = vo.fontSizeRight + 'px Arial'
          ctx.fillStyle = vo.colorRight
          ctx.fillText(vo.textRight, vo.widthRight, vo.heightRight)
        }
        ctx.font = waterSizeText.value + 'px Arial'
        ctx.fillStyle = 'rgba(0,0,0,' + transparent.value + ')'
        ctx.textAlign = 'left'
        ctx.translate(0, 0)
        ctx.rotate((-rotate.value * Math.PI) / 180)
        for (let i = -widthNew; i < widthNew + 400; i = i + widthSize.value) {
          for (let j = -heightNew; j < heightNew + 400; j = j + heightSize.value) {
            ctx.fillText(waterText.value, i, j)
          }
        }
        vo.imgUrl = canvas.toDataURL('image/png', 1)
        imgUrlArrList.push(vo.imgUrl)
      }
      fileList.value = fileArrList
      imgUrlList.value = imgUrlArrList
    }
    const changeItem = (index, val, field) => {
      const arr = fileList.value
      const itt = arr[index]
      itt[field] = val
      fileList.value = []
      fileList.value = arr
    }
    const updateImg = async () => {
      const fileArrList = fileList.value
      fileList.value = []
      await addWaterCommon(fileArrList)
    }
    const delImg = async (index) => {
      let arrNew = []
      const arr = fileList.value
      for (let i = 0; i < arr.length; i++) {
        if (i !== index) {
          const a = arr[i]
          arrNew.push(a)
        }
      }
      fileList.value = arrNew
    }
    //下载图片:通过url
    const downJpgByUrl = () => {
      const fileArrList = fileList.value
      for (let i = 0; i < fileArrList.length; i++) {
        const vo = fileArrList[i]
        const a = document.createElement('a') // 创建一个a节点插入的document
        const event = new MouseEvent('click') // 模拟鼠标click点击事件
        const nameAll = vo.name
        const fileNameMain = nameAll.substring(0, nameAll.length - 4)
        a.download = fileNameMain + '.png' // 设置a节点的download属性值
        a.href = vo.imgUrl // 将图片的src赋值给a节点的href
        a.dispatchEvent(event)
        a.remove() // 下载之后把创建的元素删除
      }
    }

    return {
      addWatermark,
      predefineColors,
      watermarkedImage,
      fileList,
      downJpgByUrl,
      imgUrlList,
      waterSizeText,
      waterText,
      transparent,
      rotate,
      heightSize,
      widthSize,
      updateImg,
      delImg,
      changeItem
    }
  }
}
</script>
